<template>
  <div id="Login">
    <div class="title" @click="toback">
      <i class="iconfont icon-xiangzuo"></i>
      <span>猫眼电影</span>
    </div>
    <div class="register">
      <div class="text">
        <input
          type="text"
          placeholder="请输入手机号"
          v-model="tel"
          @input="cantel"
        />
        <p @click="yanzheng" :class="mfoot">发送验证码</p>
        <input type="text" placeholder="请输入短信验证码" v-model="yanzheng" />
        <button @click="toLogin" :class="candl">登录</button>
      </div>
    </div>
    <p class="tishi">未注册的手机将自动生成新账号</p>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      tel: "",
      yanzheng: "",
      msg: {
        foot: "发送验证码",
        myclass: "",
      },
    };
  },
  computed: {
    candl() {
      // let a = /^[1][0-9]{10}$/
      return this.tel.length == 11 && this.yanzheng.length == 6
        ? "loginButton_1"
        : "";
    },
    mfoot() {
      return this.tel.length == 11 ? "yanZheng_2" : "";
    },
  },
  methods: {
    toback(e) {
      this.$router.go(-1);
      // console.log(e.target)
    },
    toLogin() {
      // let a = /^[1][1-9]{10}$/;
      if (this.candl == "loginButton_1") {
        sessionStorage.setItem("loginType", true);
        this.$router.push("/me");
      }
    },
    cantel() {},
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
#Login .title {
  width: 100%;
  height: 1.333333rem;
  background-color: rgb(235, 60, 60);
  display: flex;
  justify-items: center;
  align-items: center;
}
#Login .title span {
  display: inline-block;
  color: white;
  font-size: 0.426667rem;
  width: 9.066667rem;
  text-align: center;
}
#Login .title i {
  color: white;
  padding-left: 0.266667rem;
}
#Login .register {
  height: 4.8rem;
}
#Login .register .text {
  /* background-color: greenyellow; */
  height: 4.533333rem;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  position: relative;
}
#Login .register .text input {
  width: 9.066667rem;
  height: 1.066667rem;
  outline: none;
  border-style: none;
  background-color: inherit;
  border-bottom: 1px solid rgb(226, 226, 226);
}
::placeholder {
  color: rgb(189, 187, 187);
}
#Login .register .text p {
  position: absolute;
  top: 0.533333rem;
  right: 0.533333rem;
  background-color: rgb(231, 228, 228);
  color: rgb(165, 163, 163);
  padding: 0.053333rem;
  border-radius: 0.08rem;
}
#Login .register .text .yanZheng_2 {
  position: absolute;
  top: 0.533333rem;
  right: 0.533333rem;
  color: rgb(255, 0, 0);
  padding: 0.053333rem;
  border-radius: 0.08rem;
  border: 1px solid red;
  background-color: rgb(247, 244, 244);
}

#Login .register .text button {
  width: 8.533333rem;
  height: 0.96rem;
  border-style: none;
  background-color: rgb(160, 158, 158);
  border-radius: 0.106667rem;
  color: rgb(248, 248, 248);
}
#Login .register .text .loginButton_1 {
  width: 8.533333rem;
  height: 0.96rem;
  border-style: none;
  background-color: rgb(235, 60, 60);
  border-radius: 0.106667rem;
  color: rgb(255, 255, 255);
}

#Login .tishi {
  text-align: center;
  color: rgb(165, 163, 163);
}
</style>